<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="radar_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { type: "衣服", companyA: 28, companyB: 43, companyC: 53 },
        { type: "裤子", companyA: 32, companyB: 23, companyC: 48 },
        { type: "衬衫", companyA: 40, companyB: 84, companyC: 67 },
        { type: "毛衣", companyA: 38, companyB: 62, companyC: 53 },
        { type: "T恤", companyA: 52, companyB: 49, companyC: 28 },
        { type: "围巾", companyA: 75, companyB: 67, companyC: 45 },
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { type: "球鞋", companyA: 22, companyB: 19, companyC: 24 },
        { type: "羽绒服", companyA: 45, companyB: 37, companyC: 54 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "radar_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    
    // 设置坐标系
    this.chart.coordinate("polar", {
      radius: 0.75,
    });
    this.chart.data( this.transformData(this.dataList) );
    // 这里必须要给定最大值和最小值，不然无法正常显示
    this.chart.scale("nums", {
      min: 0,
      max: 80,
    });
    // 设置提示
    this.chart.tooltip({
      // 数据合并
      shared: true,
      // 展示辅助线
      showCrosshairs: true,
      // 设置辅助线
      crosshairs: {
        line: {
          style: {
            lineDash: [4, 4],
            stroke: "#333",
          },
        },
      },
    });
    // 这里 type 在笛卡尔坐标系中是 x 轴的坐标轴
    // 在极坐标系中都会默认带有 grid ，grid 的 line 类型 type 为 circle，网格线的方向由中心向每个 "type" 映射点
    this.chart.axis("type", {
      // 这里不展示坐标轴线和刻度线
      line: null,
      tickLine: null,
      // 这里极坐标系自带了 grid 这里就用它默认配置。antv 示例中配置了这一项，但实际上没有起作用。
      // grid: {
      //   line: {
      //     style: {
      //       lineDash: null,
      //     },
      //   },
      // },
    });
    // 这里 nums 在笛卡尔坐标系中是 y 轴的坐标轴
    // 网格线是以 gap (刻度值) 为半径的闭合线，由中心点向外水波纹形式扩散，直到最外层 y 轴的坐标轴
    this.chart.axis("nums", {
      // 这里不展示坐标轴线和刻度线
      line: null,
      tickLine: null,
      grid: {
        line: {
          // 这里只需要设置网格线的类型为 line (直线即可)
          type: "line",
          // antv 示例中配置了这一项，但实际上没有起作用。
          // style: {
          //   lineDash: null,
          // },
        },
      },
    });
    // 具体 axis 配置后面会单独拿案例来说明
    // 以下配置可以清楚的看见极坐标下的 x 坐标轴和 y 坐标轴
    // this.chart.axis("type", {
    //   grid:null
    // });
    // this.chart.axis("nums", {
    //   grid:null
    // });

    // 映射图形
    this.chart.line().position("type*nums").color("company").size(2);
    this.chart
      .point()
      .position("type*nums")
      .color("company")
      .shape("circle")
      .size(4)
      .style({
        stroke: "#fff",
        lineWidth: 1,
        fillOpacity: 1,
      });
    this.chart.area().position("type*nums").color("company");
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData( this.transformData(newValue) );
    },
  },
  methods:{
    // 散列数据
    transformData(data){
      const dv = new DataView().source(data);
      // 数据散列
      dv.transform({
        type: "fold",
        fields: ["companyA", "companyB", "companyC"], // 展开字段集
        key: "company", // key字段
        value: "nums", // value字段
      });
      return dv.rows
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>